<template>
	<view>
		<view class="padding" >
		<view class="search" >
			<view class="back"><image src="/static/images/back_blue.png" class="back-icon" @click="goback"> </image></view>
			<view class="title">{{name}}</view>
			<view></view>
		</view>
			<view class="box padding col">
				<view class="item" v-for="item,index in list" :key="index">
					<view class="item-num row-center">{{index}}</view>
					<image class="item-img" :src="item.coverPicList[0]"></image>
					<view class="col-start" style="margin-left: 20rpx;">
						<view class="item-name">{{item.title}}</view>
						<view class="item-author">作者{{item.userName}}</view>
					</view>
						<image :src="item.isFlow?'/static/images/iconPark-like.svg':'/static/images/iconPark-like-no.svg'"
						 class="forcuse" @click="addFollow(item)" mode="widthFix"></image>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	import {searchTop,addFlow} from '@/api/change/index.js'
	export default {
		data() {
			return {
				name:'',
				list:[],
				keyword:'',
				pageType:''
				// 1飙升榜，2：人气榜，3：打赏榜，4：畅销版，5：新书版
			}
		},
		onLoad(option) {
			this.name = option.name
			if(option.type == 'quick'){
				this.keyword = option.name
				this.getKeyword()
			}else{
				this.getTop()
			}
		},
		methods: {
			goback(){
				uni.navigateBack()
			},
			getTop(){
				if(this.name == '飙升榜'){
					this.pageType =1
				}else if(this.name == '人气榜'){
					this.pageType =2
				}else if(this.name == '打赏榜'){
					this.pageType =3
				}else if(this.name == '畅销版'){
					this.pageType =4
				}else if(this.name == '新书版'){
					this.pageType =5
				}
				searchTop({pageType:this.pageType}).then(res=>{
					this.list =res.data
				})
			},
		addFollow(item) {
			addFlow({workId:item.id}).then(res => {
				if(!item.isFlow){
					item.isFlow=1
				}else{
					item.isFlow=0
				}
			})
		},
			getKeyword(){
				searchKeyword({keyword:this.keyword,page:this.page,pageSize:this.pageSize}).then(res=>{
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.box{
		margin-top: 15px;
		border: 3px solid rgba(79, 79, 79, 1);
		border-radius: 25px;
	}
	
	.title {
		  left: 50%;
		transform: translate(-50%, 0);
		position: absolute;
		color: rgba(79, 79, 79, 1);
		font-size: 28px;
		font-family: HappyZcool-2016;
	}
	.forcuse{
		position: absolute;
		right: 0;
		width: 40px;
		margin-right: -40rpx;
		height: 40px;
	}
	.item{
		margin-top: 10px;
		display: flex;
		width: 100%;
		height: 80px;
		padding: 0 10px;
		align-items: center;
		line-height: 20px;
		border-radius: 15px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: center;
		font-family: Arial;
		border: 3px solid rgba(79, 79, 79, 1);
		position: relative;
	}
	.item-img{
		margin-left: 20rpx;
		width: 80rpx;
		height: 100rpx;
		border-radius: 20rpx;
		background-color: red;
	}
	.item-name{
		font-size: 28rpx;
		font-family: HappyZcool-2016;
	}
	.item-author{
		font-size: 20rpx;
		font-family: HappyZcool-2016;
	}
	.item-num{
		width: 80rpx;
		height: 80rpx;
		margin-left: -60rpx;
		border-radius: 50%;
		color: black;
		font-size: 38rpx;
		background-color: #FE794A;
		font-family: HappyZcool-2016;
	}
	.item-info{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-left: 10px;justify-content: space-arround;height: 60px;padding-top: 5px;padding-bottom: 5px;
	}
	
	.padding {
			padding-left: 20px;
			padding-right: 20px;
		}
		.back-icon{
			width: 19px;
			height: 19px;
		}
		.search{
			position: relative;
			height: 60px;
			line-height: 20px;
			border-radius: 25px;
			background-color: rgba(255, 255, 255, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 14px;
			text-align: center;
			font-family: Arial;
			border: 3px solid rgba(79, 79, 79, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.back{
			margin-left: 10px;
			width: 40px;
			height: 40px;
			background-color: rgba(147, 210, 243, 1);
			text-align: center;
			border: 3px solid rgba(79, 79, 79, 1);
			display: flex;
			border-radius: 50%;
			align-items: center;
			justify-content: center;
		}
</style>
